<template>
	<view class="box">
		<view class="box-left">
			<image :src="movie.images.small" mode=""></image>
		</view>
		<view class="box-main">
			<view class="box-main-title">电影名：{{movie.title}}</view>
		<!-- [a,b,c] -->
			<view class="box-main-zy">主演:{{movie.casts.map(item => item.name).join(",")}}</view>
			<view class="box-main-dy">导演：{{movie.directors.map(item => item.name).join(",")}}</view>
			
			<view class="box-main-year">年份：{{movie.year}}</view>
		</view>
		<view class="box-right">
              {{movie.rating.average}}
		</view>
	</view>

</template>

<script>
	export default {
		props:['movie']

	}
</script>

<style scoped lang="less">
	.box {
		display:flex;
		height: 400rpx;
		border-bottom: 2rpx solid #ccc;
		&-left {
			width: 240rpx;
			height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 90%;
				height: 95%;
			}
			
		}
		&-main {
			flex: 1;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			&-title {
				
			}
			&-zy {
				
			}
			&-dy {
				
			}
			&-year {
				
			}
		}
		&-right {
			width: 160rpx;
			height: 400rpx;
			font-size:100rpx;
			font-weight:700;
			color:red;
			padding-top: 20rpx;
			
		}
		
	}
</style>